<template>
  <div class="course-management">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="课程名称：">
          <el-input v-model="searchForm.courseName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="课程学科：">
          <el-select v-model="searchForm.subject" placeholder="请选择" clearable>
            <el-option label="Java" value="Java" />
            <el-option label="前端" value="前端" />
            <el-option label="Python" value="Python" />
            <el-option label="数据库" value="数据库" />
          </el-select>
        </el-form-item>
        <el-form-item label="适用人群：">
          <el-select v-model="searchForm.targetGroup" placeholder="请选择" clearable>
            <el-option label="零基础" value="零基础" />
            <el-option label="初级学员" value="初级学员" />
            <el-option label="中级学员" value="中级学员" />
            <el-option label="高级学员" value="高级学员" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="action-container">
      <el-button type="primary" @click="addCourse">
        <el-icon><Plus /></el-icon> 添加课程
      </el-button>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table :data="coursesData" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="subject" label="课程学科" width="100" />
        <el-table-column prop="courseName" label="课程名称" width="180" />
        <el-table-column prop="price" label="价格(元)" width="100">
          <template #default="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="targetGroup" label="适用人群" width="120" />
        <el-table-column prop="description" label="课程介绍" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.description }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后更新时间" width="180" />
        <el-table-column prop="operation" label="操作" width="120" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="editCourse(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="deleteCourse(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, prev, pager, next, jumper, sizes"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑课程对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      @close="dialogClosed"
    >
      <el-form :model="courseForm" label-width="100px">
        <el-form-item label="课程学科：">
          <el-select v-model="courseForm.subject" placeholder="请选择" required>
            <el-option label="Java" value="Java" />
            <el-option label="前端" value="前端" />
            <el-option label="Python" value="Python" />
            <el-option label="数据库" value="数据库" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称：">
          <el-input v-model="courseForm.courseName" placeholder="请输入" required />
        </el-form-item>
        <el-form-item label="价格(元)：">
          <el-input-number v-model="courseForm.price" :min="0" placeholder="请输入" required />
        </el-form-item>
        <el-form-item label="适用人群：">
          <el-select v-model="courseForm.targetGroup" placeholder="请选择" required>
            <el-option label="零基础" value="零基础" />
            <el-option label="初级学员" value="初级学员" />
            <el-option label="中级学员" value="中级学员" />
            <el-option label="高级学员" value="高级学员" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程介绍：">
          <el-input
            v-model="courseForm.description"
            type="textarea"
            placeholder="请输入课程介绍"
            rows="4"
            required
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCourse">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  courseName: '',
  subject: '',
  targetGroup: ''
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 90
})

// 课程数据（模拟数据）
const coursesData = ref([
  {
    id: 1,
    subject: 'Java',
    courseName: 'Java基础',
    price: 998,
    targetGroup: '零基础',
    description: '主要面向零基础同学，深入讲解Java编程语言的基础知识和核心概念...',
    updateTime: '2025-05-21 08:50:08'
  },
  {
    id: 2,
    subject: 'Java',
    courseName: 'Java进阶',
    price: 18000,
    targetGroup: '中级学员',
    description: '主要面向基础同学，深入讲解Java高级特性和企业级应用开发...',
    updateTime: '2025-05-21 08:50:08'
  },
  {
    id: 3,
    subject: 'Java',
    courseName: 'Java基础班',
    price: 10000,
    targetGroup: '零基础',
    description: '主要面向零基础同学，深入讲解Java基础知识和入门实践...',
    updateTime: '2025-05-21 08:50:08'
  },
  {
    id: 4,
    subject: 'Java',
    courseName: 'Java基础班',
    price: 10000,
    targetGroup: '零基础',
    description: '主要面向零基础同学，深入讲解Java基础知识和入门实践...',
    updateTime: '2025-05-21 08:50:08'
  },
  {
    id: 5,
    subject: 'Java',
    courseName: 'Java基础班',
    price: 10000,
    targetGroup: '零基础',
    description: '主要面向零基础同学，深入讲解Java基础知识和入门实践...',
    updateTime: '2025-05-21 08:50:08'
  },
  {
    id: 6,
    subject: 'Java',
    courseName: 'Java基础班',
    price: 10000,
    targetGroup: '中级学员',
    description: '主要面向零基础同学，深入讲解Java基础知识和入门实践...',
    updateTime: '2025-05-21 08:50:08'
  }
])

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('添加课程')
const courseForm = reactive({
  id: null,
  subject: '',
  courseName: '',
  price: 0,
  targetGroup: '',
  description: ''
})

// 搜索函数
const search = () => {
  console.log('搜索条件:', searchForm)
  // 这里应该调用API获取数据
  // 在实际应用中，这里会发送请求到后端进行搜索
  ElMessage.success('搜索成功')
}

// 重置函数
const reset = () => {
  searchForm.courseName = ''
  searchForm.subject = ''
  searchForm.targetGroup = ''
  console.log('重置搜索条件')
}

// 添加课程
const addCourse = () => {
  dialogTitle.value = '添加课程'
  resetCourseForm()
  dialogVisible.value = true
}

// 编辑课程
const editCourse = (course) => {
  dialogTitle.value = '编辑课程'
  Object.assign(courseForm, course)
  dialogVisible.value = true
}

// 删除课程
const deleteCourse = (id) => {
  ElMessageBox.confirm(
    '确定要删除该课程吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      // 在实际应用中，这里会发送请求到后端进行删除
      coursesData.value = coursesData.value.filter(item => item.id !== id)
      ElMessage.success('删除成功')
    })
    .catch(() => {
      // 取消删除
    })
}

// 提交课程（添加或编辑）
const submitCourse = () => {
  // 表单验证
  if (!courseForm.subject || !courseForm.courseName || !courseForm.price || !courseForm.targetGroup || !courseForm.description) {
    ElMessage.warning('请填写完整信息')
    return
  }

  if (courseForm.id) {
    // 编辑模式
    const index = coursesData.value.findIndex(item => item.id === courseForm.id)
    if (index !== -1) {
      coursesData.value[index] = { ...courseForm, updateTime: formatDate(new Date()) }
      ElMessage.success('编辑成功')
    }
  } else {
    // 添加模式
    const newCourse = {
      ...courseForm,
      id: Date.now(), // 模拟生成ID
      updateTime: formatDate(new Date())
    }
    coursesData.value.unshift(newCourse)
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false
}

// 对话框关闭
const dialogClosed = () => {
  resetCourseForm()
}

// 重置课程表单
const resetCourseForm = () => {
  courseForm.id = null
  courseForm.subject = ''
  courseForm.courseName = ''
  courseForm.price = 0
  courseForm.targetGroup = ''
  courseForm.description = ''
}

// 分页处理
const handleSizeChange = (size) => {
  pagination.pageSize = size
  console.log('每页条数:', size)
  // 这里应该重新获取数据
}

const handleCurrentChange = (current) => {
  pagination.currentPage = current
  console.log('当前页码:', current)
  // 这里应该重新获取数据
}

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 组件挂载时的初始化
onMounted(() => {
  console.log('课程管理组件已挂载')
})
</script>

<style scoped>
.course-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-container {
  margin-bottom: 20px;
}

.table-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-table__header) th {
  background-color: #fafafa !important;
  font-weight: 600;
}
</style>